<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- react 核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- dom相关库 -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- Es6->Es5 jsx->js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="app"></div>
<!-- 使用JSX，属性使用text/babel -->
<script type="text/babel">

    class Demo extends React.Component{
        state = {isHot: false}

        showInfo = ()=>{
            const {input1} = this
            alert(input1.value)
        }

        changeWeather = ()=>{
            const {isHot} = this.state
            this.setState({isHot: !isHot})
        }

        saveInput = (currentNode) => {
            this.input1 = currentNode;
            console.log('@', currentNode)
        }

        render(){
            const {isHot} = this.state
            return(
                <div>
                    <h2>今天天气很{isHot ? '炎热' : '凉爽'}</h2>    
                    {/* 内联方式定义回调函数：更新的时候会调用两次该回调，第一次传入空，第二次传入DOM，但无关紧要 */}
                    {/*<input ref={(currentNode) => {this.input1 = currentNode; console.log('@', currentNode)}} type="text" />*/}

                    {/* 定义为 class 绑定函数 */}
                    <input ref={this.saveInput} type="text" />
                    <button onClick = {this.showInfo}>点我提示输入的数据</button>
                    <button onClick = {this.changeWeather}>点我切换天气</button>
                </div>
            )
        }
    }
    

    //渲染组件
    ReactDOM.render(<Demo/>, document.getElementById("app"))
</script>
 
</body>
</html>